<template>
	<view class="PhotoGroupBox">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#060143'}"></view>
		<uni-nav-bar backgroundColor="#060143;" color="#FFF" :title="$t('language.Photo')" @clickLeft="goBack" left-icon="left"
			:border="false" />
		<view class="logo">
			<image class="logo-ic" src="@/static/logo.png" alt="" />
			<view class="lang-wrap" @click="changeLanguage">
				<image src="../../static/100.png" mode=""></image>
				<text>{{$t('locale.lang')}}</text>
			</view>
		</view>
		<view class="photoTab">
			<view class="photoTabList" :style="{width: (photoType.length*140) + 'upx'}">
				<view class="photo" v-for="(item,index) in photoType" :key="index" @click="changeTab(index)">
					<text :class="ontable == index? 'ontable':''">{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="imgBox">
			<view class="imgListBox">
				<custom-waterfalls-flow ref="waterfallsFlowRef" :value="list" imageKey="thumbs" :column="2"
					:columnSpace="1.5" @wapperClick.self="wapperClick" @imageClick.self="imageClick" @loaded="loaded">
					<view class="imgList" v-for="(item,index) in list" :key="index"
						slot="slot{{index}}">
						<view class="saveButton">
							<!-- <image :src="`${baseUrl}/static/img/download-1.png`" alt srcset
								@click.stop="showImg(index, list)" /> -->
							<text></text>
							<view>
								<image v-if="item.is_zan == 1" :src="`${baseUrl}/static/img/onLike.png`" alt srcset
									@click.stop="RemoveLike(index, list)" />
								<image v-else :src="`${baseUrl}/static/img/love.png`"
									@click.stop="onLike(index, list)" />
							</view>
						</view>
					</view>
				</custom-waterfalls-flow>
			</view>
		</view>
		<uni-popup ref="popup" class="preview-img" mask-background-color="rgba(0,0,0,1)" :animation="false" :is-mask-click="true">
			<view class="popup-content">
				<image class="popup-img" @load="loadImg" :src="previewImg" mode="widthFix" @longpress="savePoster(previewImg)"></image>
				<view class="btn" v-if="showPreviewBtn" @click="showImgOld">查看原图</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import customWaterfallsFlow from "@/uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow.vue"
	import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
	
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import {
		cate_list,
		cate_img,
		img_zan
	} from "@/api/user";
	let timer = null

	export default {
		name: "PhotoGroup",
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				ontable: 0,
				pageIndex: 0,
				evenId: "",
				photoType: [],
				list: [],
				loading: false,
				finished: false,
				isScroll: true,
				column: 2,
				previewImg: '',
				previewImgIndex: 0,
				showPreviewBtn: false
			};
		},
		components: {
			customWaterfallsFlow,
			uniIcons
		},
		onLoad(o) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			let evenId = o.evenId;
			this.evenId = evenId;
			this.getPhotoType();
		},
		created() {},
		onReachBottom() {
			this.getImg()
		},
		mounted() {},
		destroyed() {},
		methods: {
			loaded() {
				console.log('加载完成')
			},
			wapperClick(item) {
				const {
					index
				} = item
				this.showImg(index, this.list)
			},
			imageClick(item) {
				const {
					index
				} = item
				this.showImg(index, this.list)
			},
			async getPhotoType() {
				const response = await cate_list({
					event_id: this.evenId
				});
				if (response.code == 200) {
					this.photoType = response.data;
					this.getImg();
				} else {
					console.log(response);
				}
			},
			getImg() {
				// 异步更新数据
				if (!this.finished) {
					this.pageIndex++;
					uni.showLoading({
						title: 'Loading...'
					})
					this.isScroll = false
					cate_img({
						event_id: this.evenId,
						cate_id: this.photoType[this.ontable].cate_id ?
							this.photoType[this.ontable].cate_id : "2",
						page: this.pageIndex
					}).then(
						response => {
							uni.hideLoading()
							if (response.code == 200) {
								let pushList = response.data;
								this.list = this.list.concat(pushList);
								
								if (this.list.length >= response.count) {
									this.finished = true;
								}
							} else {}
						},
						err => {
							uni.hideLoading()
							console.log(err)
						}
					);
				}
			},
			changeTab(index) {
				this.ontable = index;
				this.pageIndex = 0;
				this.isScroll = true;
				this.finished = false;
				this.list = [];
				this.$refs.waterfallsFlowRef.refresh();
				this.getImg();
			},
			RemoveLike(index, list) {
				img_zan({
					event_id: this.evenId,
					cate_id: this.photoType[this.ontable].cate_id,
					img_id: list[index].img_id,
					type: "2"
				}).then(
					response => {
						uni.showToast({
							title: response.msg,
							icon: 'none'
						})
						if (response.code == 200) {
							list[index].is_zan = 0;
						}
					},
					err => {
						console.log(err)
					}
				);
			},
			onLike(index, list) {
				img_zan({
					event_id: this.evenId,
					cate_id: this.photoType[this.ontable].cate_id,
					img_id: list[index].img_id,
					type: "1"
				}).then(
					response => {
						uni.showToast({
							title: response.msg,
							icon: 'none'
						})
						if (response.code == 200) {
							list[index].is_zan = 1;
						}
					},
					err => {
						console.log(err)
					}
				);
			},
			loadImg(e) {
				uni.hideLoading()
			},
			showImgOld() {
				this.previewImg = this.list[this.previewImgIndex].thumb
				this.showPreviewBtn = false
				uni.showLoading()
			},
			showImg(index, list) {
				let arr = list;
				let imgsrc = list[index].thumb;
				let thumbs = list[index].thumbs;
				var imgList = [];
				for (let i = 0; i < arr.length; i++) {
					imgList.push(arr[i].thumb);
				}
				this.previewImgIndex = index
				this.previewImg = thumbs
				this.showPreviewBtn = true
				this.$refs.popup.open()
				uni.showLoading()
				
				// wx.previewImage({
				// 	current: imgsrc, // 当前显示图片的http链接
				// 	urls: imgList // 需要预览的图片http链接列表
				// });
			},
			// 保存
			savePoster(url) {
				const that = this
				uni.getImageInfo({
					src: url,
					success: function (image) {
						if(image.errMsg == 'getImageInfo:ok') {
							wx.saveImageToPhotosAlbum({
								filePath: image.path,
								success: function() {
									wx.showToast({
										title: that.$t('index.text-50'),
										icon: 'none',
										duration: 1500
									});
								},
								fail(err) {
									if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg ===
										"saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
										"saveImageToPhotosAlbum:fail authorize no response") {
										wx.showModal({
											title: '提示',
											content: '需要您授权保存相册',
											showCancel: false,
											success: modalSuccess => {
												wx.openSetting({
													success(settingdata) {
														if (settingdata.authSetting[
																'scope.writePhotosAlbum']) {
															wx.saveImageToPhotosAlbum({
																filePath: image.path,
																success: function() {
																	wx.showToast({
																		title: that.$t('index.text-50'),
																		icon: 'none',
																		duration: 1500
																	});
																},
															})
														} else {
															wx.showToast({
																title: '授权失败，请稍后重新获取',
																icon: 'none',
																duration: 1500
															});
														}
													}
												})
											}
										})
									}
								}
							})
						} else {
							wx.showToast({
								title: '下载图片失败，请稍后重新获取',
								icon: 'none',
								duration: 1500
							});
						}
					}
				});
			},
			goBack() {
				uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	};
</script>
<style lang="scss">
	
	.logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;
		background-color: #060143;

		.logo-ic {
			width: 78upx;
			height: 64upx;
		}

		.lang-wrap {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24upx;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 12upx;
			}
		}
	}

	page {
		background: #050033;
	}

	.column-value {
		overflow: inherit !important;
		position: relative;
	}

	.photoTab {
		background: #050033;
		border-bottom: 1upx solid #1e1a48;
		
	}

	.photoTabList {
		white-space: nowrap;
		padding: 20upx 30upx;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
	
	.photoTabList::-webkit-scrollbar {
		display: none;
	}

	.photo {
		display: inline-block;
		padding-right: 24upx;
		color: #fff;
	}

	.photo text {
		display: inline-block;
		color: #b88d5b;
		text-align: center;
		line-height: 60upx;
		padding: 0 30upx;
	}

	.ontable {
		color: #fff !important;
		border: 1upx solid #fff;
		border-radius: 30upx;
	}
	
	.imgListBox {
		width: 100%;
	}
	
	.imgBox {
		padding: 30upx;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-wrap: nowrap;
	}

	.imgBox .imgList image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.imgBox .imgList {
		width: 330upx;
		margin-right: 30upx;
		margin-bottom: 30upx;
		display: flex;
		flex-direction: column;
	}

	.imgBox .imgList:nth-child(2n) {
		margin-right: 0
	}

	.saveButton {
		width: 88%;
		position: absolute;
		left: 50%;
		bottom: 20upx;
		transform: translate3d(-50%, 0, 0);
		z-index: 10000000;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.saveButton>image {
		width: 24upx !important;
		height: 29upx !important;
	}

	.saveButton>view {
		display: flex;
		align-items: center;
	}

	.saveButton>view>image {
		width: 32upx !important;
		height: 29upx !important;
	}
	
	.uni-popup {
	  position: fixed;
	  z-index: 999999999999999999 !important;
	}
	
	.preview-img {
		.popup-content {
			width: 750upx;
		}
		
		.popup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		.popup-img {
			width: 100%;
			height: auto;
		}
		
		.btn {
			padding: 12upx 30upx;
			border: 1upx solid #fff;
			color: #fff;
			font-size: 24upx;
			margin-top: 40upx;
			border-radius: 8upx;
		}
	}
</style>